﻿<UserControl x:Class="CitiSurface.VideoPlayerControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:s="clr-namespace:Microsoft.Surface.Presentation.Controls;assembly=Microsoft.Surface.Presentation"
             xmlns:cs="clr-namespace:CitiSurface" mc:Ignorable="d" 
             x:Name="root" Loaded="RootLoaded"
             d:DesignHeight="300" d:DesignWidth="300">
    <!-- Customized Video Player Controler used to play the video when it is in the scatterView -->
    <UserControl.Resources>
        <Storyboard x:Key="ControlPanelFadein">
            <DoubleAnimation Storyboard.TargetName="ControlPanel"
                            Storyboard.TargetProperty="Opacity"
                            From="0" To="1" Duration="0:0:1"/>
        </Storyboard>

        <Storyboard x:Key="ControlPanelFadeout">
            <DoubleAnimation Storyboard.TargetName="ControlPanel"
                            Storyboard.TargetProperty="Opacity"
                            From="1" To="0" Duration="0:0:1"/>
        </Storyboard>
    </UserControl.Resources>

    <Grid>
        <Grid.Background>
            <SolidColorBrush Color="Black"/>
        </Grid.Background>
        <Image Source="{Binding ScreenshotSource}" Stretch="Uniform"/>
        
        <MediaElement x:Name="VideoPlayer" LoadedBehavior="Manual"
                                             Source="{Binding ElementName=root, Path=Source}"
                      TouchDown="VideoPlayerTouchDown"/>
        <Grid x:Name="ControlPanel" Opacity="0" Visibility="Collapsed">
            <cs:CitiSurfaceButton HorizontalAlignment="Right" VerticalAlignment="Top"
                                  x:Name="CancelButton" Source="Resources/cancel.png"
                                                  Click="CancelButtonClick"/>

            <StackPanel Orientation="Horizontal" Background="Transparent"
                    HorizontalAlignment="Right" VerticalAlignment="Bottom">
                <cs:CitiSurfaceButton x:Name="PlayButton" Source="Resources/play.png" Click="PlayButtonClick"/>
                <cs:CitiSurfaceButton x:Name="PauseButton" Source="Resources/pause.png" Click="PauseButtonClick"/>
                <cs:CitiSurfaceButton x:Name="RefreshButton" Source="Resources/refresh.png" Click="RefreshButtonClick"/>
            </StackPanel>
        </Grid>
    </Grid>
</UserControl>
